import React from 'react';
import {Link} from 'react-router-dom'

import Flex from 'antd-mobile/lib/flex';
import Tabs from 'antd-mobile/lib/tabs';

import 'antd-mobile/lib/tabs/style/index.css'
import 'antd-mobile/lib/flex/style/index.css'

import '../static/styles/news-detail.css'
import '../static/icon/icon.css'

import { get } from  '../api/getData';

const TabPane = Tabs.TabPane;

const tabs2 = [
    { title: '1st Tab' },
    { title: '2nd Tab' },
    { title: '3rd Tab' }
];
function callback(key) {
    console.log('onChange', key);
}
function handleTabClick(key) {
    console.log('onTabClick', key);
}
let makeTabPane = React.createClass({
    getInitialState: function () {
        return {
            cateData: this.props.cateData
        };
    },
    render : function () {
        {console.log(1111)}
        return (
            <TabPane tab={this.state.cateData.name} key={this.state.cateData.id}>
                <Flex className="card bd-b1">
                    <Flex.Item className="flex-auto">
                        <div className="head head-square">
                            <img className="head-img" src={require('../static/imgs/default.jpg')} alt=""/>
                        </div>
                    </Flex.Item>
                    <Flex.Item className="card-desc">
                        <Flex direction="column" align="start">
                            <Flex.Item className="user-name ml0">
                                虚远大于实：不要把特斯拉市值超越通用汽车当回事儿
                            </Flex.Item>
                            <Flex.Item className="ml0">
                                日前，特斯拉突破300美元大关，让该公司总市值达到527亿美元，高于通用汽车496亿美元的市值，进而成为全美市值第一汽车制造商。
                            </Flex.Item>
                            <Flex.Item className="ml0">
                            </Flex.Item>
                        </Flex>
                    </Flex.Item>
                </Flex>
            </TabPane>
        )
    }

});

class NewsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cate : []
        };
    }

    componentDidMount(){
        get('/home/cate' , {} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    console.log(data.data);
                    this.setState({
                        cate: data.data
                    });
                }
            }
        });
    }

    render() {
        return (
            <div>
                <div>
                    <Tabs defaultActiveKey="0" onChange={callback} pageSize={5} onTabClick={handleTabClick}>
                        {
                            this.state.cate.map(function (cate) {
                                return <makeTabPane cateData = {cate}/>
                            })
                        }
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default NewsList;